<template>
  <div class="ywsl">
    <Card title="选择业务">
      <div slot="title" style="margin-left: 20px">
        <el-radio-group v-model="checked" size="mini">
          <el-radio-button label="业务一"></el-radio-button>
          <el-radio-button label="业务二"></el-radio-button>
        </el-radio-group>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="400业务" name="first">
          <section>
            <h4>一、400电话介绍</h4>
            <p>
              400电话是主被叫分摊付费业务电话，主叫方支付当地市话费，被叫接听方承担市话或长途费。
            </p>
            <p>
              企业400电话总机是一个中转虚拟号码不需要安装实体电话，只需绑定固话、手机或呼叫中心平台即可使用。
            </p>
            <h4>二、400电话作用</h4>
            <p>
              400电话可以提升企业的形象，增加客户信任，是企业信誉和实力的象征。
            </p>
            <p>
              号码终身不变，没有地域限制，实现企业对外宣传统一性、规范性，不会流失一个客户。平台功能强大，是企业营销必备利器。
            </p>
          </section>
          <section style="float: right">
            <el-button type="primary" @click="paneA.dialogVisibleA = true">
              业务开通
            </el-button>
            <el-button type="primary" @click="paneA.dialogVisibleB = true">
              查看订单
            </el-button>
          </section>
          <!-- 400业务--业务开通 -->
          <el-dialog
            title="业务开通"
            :visible.sync="paneA.dialogVisibleA"
            width="60%"
            top="6vh"
          >
            <el-scrollbar>
              <sbyw />
            </el-scrollbar>
            <span slot="footer">
              <el-button
                type="primary"
                @click="
                  paneA.dialogVisibleA = false
                  $message({
                    message: '提单成功，订单号为 D458623',
                    type: 'success'
                  })
                "
                >确认提单</el-button
              >
            </span>
          </el-dialog>
          <!-- 400业务--查看订单 -->
          <el-dialog
            title="查看订单"
            :visible.sync="paneA.dialogVisibleB"
            width="60%"
            top="6vh"
          >
            <el-scrollbar>
              <sbdd />
            </el-scrollbar>
            <span slot="footer">
              <el-button @click="paneA.dialogVisibleB = false">返 回</el-button>
            </span>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="5G业务" name="second">5G业务</el-tab-pane>

        <!-- 业务一 -->
        <el-tab-pane
          v-if="checked === '业务一'"
          label="长流程云MAS局数据产品"
          name="third"
        >
          <section>
            <h4>一、长流程云MAS局数据产品介绍</h4>
            <p>云MAS业务由政企分公司统筹规划、统一管理、统一运营、服务全网</p>
            <p>
              集团政企分公司负责云MAS业务平台的整体研发、业务开通、运营组织管理以及直管客户的营销推广，各省公司负责本省客户云MAS业务营销推广、业务受理等工作。
            </p>
          </section>
          <section style="float: right">
            <el-button type="primary" @click="paneB.dialogVisibleA = true">
              业务开通
            </el-button>
            <el-button type="primary" @click="paneB.dialogVisibleB = true">
              局数据审批
            </el-button>
            <el-button type="primary" @click="paneB.dialogVisibleC = true">
              查看订单
            </el-button>
          </section>

          <!-- 长流程云--业务开通 -->
          <el-dialog
            title="业务开通"
            :visible.sync="paneB.dialogVisibleA"
            width="60%"
            top="6vh"
          >
            <el-scrollbar>
              <clcy />
            </el-scrollbar>
            <span slot="footer">
              <el-button
                type="primary"
                @click="
                  paneB.dialogVisibleA = false
                  $message({
                    message: '提单成功，订单号为 D562366',
                    type: 'success'
                  })
                "
                >确认提单</el-button
              >
            </span>
          </el-dialog>
          <!-- 长流程云--局数据审批 -->
          <el-dialog
            title="局数据审批"
            :visible.sync="paneB.dialogVisibleB"
            width="60%"
            top="6vh"
          >
            <el-scrollbar>
              <clcy_sp />
            </el-scrollbar>
            <span slot="footer">
              <el-button
                @click="
                  paneB.dialogVisibleA = false
                  $message({
                    message: '提单成功，订单号为 D568956',
                    type: 'success'
                  })
                "
                >返 回</el-button
              >
            </span>
          </el-dialog>
          <!-- 长流程云--查看订单 -->
          <el-dialog
            title="查看订单"
            :visible.sync="paneB.dialogVisibleC"
            width="60%"
            top="6vh"
          >
            <el-scrollbar>
              <clcy_dd />
            </el-scrollbar>
            <span slot="footer">
              <el-button @click="paneA.dialogVisibleB = false">返 回</el-button>
            </span>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane
          v-if="checked === '业务一'"
          label="双跨融合通信业务"
          name="fourth"
        >
          <section>
            <h4>一、双跨融合通信集团固话产品业务介绍</h4>
            <p>双跨融合通信客户端是为企业客户提供融合通信业务的客户端产品</p>
            <p>
              提供的包括语音/视频通话、统一Centrex、多媒体会议、PGM、电子传真、点击拨号的客户端软件产品。
            </p>
            <p>
              其发展目标是成为中国移动面向企业客户的第一桌面，面向用户提供统一渠道、统一入口。
            </p>
          </section>
          <section style="float: right">
            <el-button type="primary" @click="paneC.dialogVisibleA = true">
              业务开通
            </el-button>
            <el-button type="primary" @click="paneC.dialogVisibleB = true">
              审批
            </el-button>
            <el-button type="primary" @click="paneC.dialogVisibleC = true">
              查看订单
            </el-button>
          </section>

          <!-- 双跨--业务开通 -->
          <el-dialog
            title="业务开通"
            :visible.sync="paneC.dialogVisibleA"
            width="60%"
            top="6vh"
          >
            <el-scrollbar>
              <sk />
            </el-scrollbar>
            <span slot="footer">
              <el-button
                type="primary"
                @click="
                  paneC.dialogVisibleA = false
                  $message({
                    message: '提单成功，订单号为 D564521',
                    type: 'success'
                  })
                "
                >确认提单</el-button
              >
            </span>
          </el-dialog>
          <!-- 双跨--审批 -->
          <el-dialog
            title="审批"
            :visible.sync="paneC.dialogVisibleB"
            width="60%"
            top="6vh"
          >
            <el-scrollbar>
              <sk_sp />
            </el-scrollbar>
            <span slot="footer">
              <el-button @click="paneC.dialogVisibleB = false">
                返 回
              </el-button>
            </span>
          </el-dialog>
          <!-- 双跨--查看订单 -->
          <el-dialog
            title="查看订单"
            :visible.sync="paneC.dialogVisibleC"
            width="60%"
            top="6vh"
          >
            <el-scrollbar>
              <sk_dd />
            </el-scrollbar>
            <el-dialog
              class="append"
              title="添加成员"
              :visible.sync="paneC.dialogVisibleD"
              width="60%"
              top="6vh"
              append-to-body
            >
              <upload />
              <span slot="footer">
                <el-button
                  type="primary"
                  @click="
                    paneC.dialogVisibleD = false
                    handleClick()
                  "
                >
                  确 定
                </el-button>
              </span>
            </el-dialog>
            <el-dialog
              title="添加产品"
              :visible.sync="paneC.dialogVisibleE"
              width="60%"
              top="6vh"
              append-to-body
            >
              <sk_cp />
              <span slot="footer">
                <el-button
                  type="primary"
                  @click="
                    paneC.dialogVisibleE = false
                    handleClickA()
                  "
                >
                  确认提单
                </el-button>
              </span>
            </el-dialog>
            <span slot="footer">
              <el-button @click="paneC.dialogVisibleB = false">
                返 回
              </el-button>
            </span>
          </el-dialog>
        </el-tab-pane>

        <!-- 业务二 -->
        <el-tab-pane
          v-if="checked === '业务二'"
          label="物联网局数据"
          name="third"
        >
          <section>
            <h4>一、物联网局数据介绍</h4>
            <p>
              策略控制和计费（PCC）是由国际标准组织3GPP定义的动态策略和计费控制技术方案，PCC策略的关键在于通过用户识别能力，区分用户带宽、使用时间、用户位置信息、接入类型，实现基于用户、位置、计费等执行不同的PCC策略。BOSS系统作为运营商客户业务受理运营的支撑系统，承载着几乎所有用户的业务签约/变更信息，让BOSS系统作为PCC业务受理的平台是最适宜的。本文对PCC业务在BOSS侧的建设研究，主要就是研究如何在BOSS系统体系框架下进行PCC业务受理、变更、存储、处理、同步以及开放。
            </p>
            <p>（1）支持用户签约信息、用户策略订购、业务策略订购的存储；</p>
            <p>（2）支持业务签约、变更等内部业务逻辑处理；</p>
            <p>（3）支持业务前台查询、受理等操作；</p>
            <p>
              （4）支持基于计费情况进行分析，决定出哪些策略适用于哪些用户，并将PCC策略变更信息同步给云平台。
            </p>
          </section>
          <section style="float: right">
            <el-button type="primary" @click="paneD.dialogVisibleA = true">
              业务开通
            </el-button>
            <el-button type="primary" @click="paneD.dialogVisibleC = true">
              审批
            </el-button>
            <el-button type="primary" @click="paneD.dialogVisibleB = true">
              查看订单
            </el-button>
          </section>
          <!-- 物联网---开通 -->
          <el-dialog
            title="业务开通"
            :visible.sync="paneD.dialogVisibleA"
            width="60%"
            top="6vh"
          >
            <el-scrollbar>
              <wlw />
            </el-scrollbar>
            <span slot="footer">
              <el-button
                type="primary"
                @click="
                  paneD.dialogVisibleA = false
                  $message({
                    message: '提单成功，订单号为 D566238',
                    type: 'success'
                  })
                "
                >确认提单</el-button
              >
            </span>
          </el-dialog>
          <!-- 物联网---审批 -->
          <el-dialog
            title="审批"
            :visible.sync="paneD.dialogVisibleC"
            width="60%"
            top="6vh"
          >
            <el-scrollbar>
              <wlw_sp />
            </el-scrollbar>
            <span slot="footer">
              <el-button @click="paneD.dialogVisibleC = false">返 回</el-button>
            </span>
          </el-dialog>
          <!-- 物联网---查看订单 -->
          <el-dialog
            title="查看订单"
            :visible.sync="paneD.dialogVisibleB"
            width="60%"
            top="6vh"
          >
            <el-scrollbar>
              <wlw_dd />
            </el-scrollbar>
            <span slot="footer">
              <el-button @click="paneD.dialogVisibleA = false">返 回</el-button>
            </span>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane
          v-if="checked === '业务二'"
          label="千里眼合作伙伴森林防火产品"
          name="fourth"
        >
          <section>
            <h4>一、千里眼合作伙伴森林防火产品业务介绍</h4>
            <p>
              利用卫星进行森林火灾监测，对大面积森林的无死角、全天候、实时监控
            </p>
            <p>
              不仅可以及早发现早期林火，特别是边远地区和人烟稀少地区的林火，而且可以对已发现的林火，特别是重大林火蔓延情况进行连续跟踪监测，为扑火提供辅助决策。
            </p>
          </section>
          <section style="float: right">
            <el-button type="primary" @click="paneE.dialogVisibleA = true">
              业务开通
            </el-button>
          </section>
          <el-dialog
            title="业务开通"
            :visible.sync="paneE.dialogVisibleA"
            width="60%"
            top="6vh"
          >
            <el-scrollbar>
              <qly />
            </el-scrollbar>
            <span slot="footer">
              <el-button
                type="primary"
                @click="
                  paneE.dialogVisibleA = false
                  $message({
                    message: '提单成功，订单号为 D554123',
                    type: 'success'
                  })
                "
                >确认提单</el-button
              >
            </span>
          </el-dialog>
        </el-tab-pane>
      </el-tabs>
    </Card>
  </div>
</template>

<script>
import Card from '@/components/Card'
import sbyw from './components/400yw'
import clcy from './components/clcy'
import clcy_sp from './components/clcy_sp'
import sk from './components/sk'
import sk_sp from './components/sk_sp'
import sk_dd from './components/sk_dd'
import upload from './components/upload'
import sk_cp from './components/sk_cp'
import wlw from './components/wlw'
import qly from './components/qly'
import sbdd from './components/400dd'
import clcy_dd from './components/clcy_dd'
import wlw_dd from './components/wlw_dd'
import wlw_sp from './components/wlw_sp'
export default {
  components: {
    Card,
    sbyw,
    clcy,
    clcy_sp,
    sk,
    sk_sp,
    sk_dd,
    upload,
    sk_cp,
    wlw,
    qly,
    sbdd,
    clcy_dd,
    wlw_dd,
    wlw_sp
  },
  data() {
    return {
      activeName: 'first',
      checked: '业务一',
      paneA: {
        dialogVisibleA: false,
        dialogVisibleB: false
      },
      paneB: {
        dialogVisibleA: false,
        dialogVisibleB: false,
        dialogVisibleC: false
      },
      paneC: {
        dialogVisibleA: false,
        dialogVisibleB: false,
        dialogVisibleC: false,
        dialogVisibleD: false,
        dialogVisibleE: false
      },
      paneD: {
        dialogVisibleA: false,
        dialogVisibleB: false,
        dialogVisibleC: false
      },
      paneE: {
        dialogVisibleA: false,
        dialogVisibleB: false
      }
    }
  },
  created() {
    this.$bus.$on('addcp', val => {
      this.paneC.dialogVisibleE = val
    })
    this.$bus.$on('addcy', val => {
      this.paneC.dialogVisibleD = val
    })
  },
  methods: {
    handleClick() {
      this.$bus.$emit('donecy', true)
      this.$message({
        message: '提单成功，订单号为D564522',
        type: 'success'
      })
    },
    handleClickA() {
      this.$bus.$emit('donecp', true)
      this.$message({
        message: '提单成功，订单号为D564523',
        type: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ywsl {
  p {
    text-indent: 2em;
  }
  /deep/.el-dialog__body {
    position: relative;
    height: 65vh;
    overflow: hidden;
  }
  .upload-demo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
